<template>
  <view v-if="template">
    <s-layout title="九丝城宇宙" tabbar="/pages/index/index"
              :bgStyle="template.style?.background"
    >
      <view v-if="false" class="search-wrapper"
            @click="sheep.$router.go('/pages/index/search')">
        <image src="@/static/img/public-icon-2.png" mode=""></image>
        <uni-easyinput
          type="text"
          :inputBorder="false"
          :styles="{ disableColor: '#1E1E1E' }"
          placeholderStyle="color:#767676;font-size:24rpx;"
          placeholder="红旗E-001"
        />
      </view>
      <view class="swiper-wrapper">
        <s-block v-for="(item, index) in template.data" :key="index">
          <s-block-item v-if="item.type=='imageBanner'" :type="item.type" :data="item.data" />
        </s-block>
      </view>
      <view class="text-wrapper">
        <view class="text-item">
          <view class="title">九丝城宇宙汽车</view>
          <view class="sub-title">电动机车砍价专家</view>
        </view>
        <view class="right">
          <image src="@/static/img/home-icon-1.png" mode=""></image>
          <text>招募城市合伙人</text>
        </view>
      </view>
      <view class="product-wrap">
        <view class="product-wrap-overflow">
          <view @tap="
  sheep.$router.go('/pages/inherit/vehicleDetails', {
    id:item.id,
  })
  " v-for="item in carList" :key="item.id" class="product-wrap-item">
            <image :src="sheep.$url.cdn(item.image)"></image>
            <view class="product-wrap-text">
              <view class="product-wrap-text-1">￥{{ item.price && item.price[0] ? item.price[0] : '--' }}</view>
              <!-- <view class="product-wrap-text-2">￥{{ item.original_price }}</view> -->
            </view>
          </view>
        </view>
      </view>
      <open-vip></open-vip>
      <!--      临时注释-->
      <!--      <view class="nine-wrap">-->
      <!--        <view class="nine-wrap-item">-->
      <!--          <view class="nine-wrap-item-m">-->
      <!--            <view class="nine-wrap-item-t1">九玄服务中心</view>-->
      <!--            <view class="nine-wrap-item-t2">激活服务中心联创身份</view>-->
      <!--            <view class="nine-wrap-item-t3">-->
      <!--              <view>￥100000</view>-->
      <!--            </view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--        <view class="nine-wrap-item">-->
      <!--          <view class="nine-wrap-item-m">-->
      <!--            <view class="nine-wrap-item-t1">九玄传承官</view>-->
      <!--            <view class="nine-wrap-item-t2">定投产生固定收益</view>-->
      <!--            <view class="nine-wrap-item-t3 nine-wrap-item-right">-->
      <!--              <view>￥499888</view>-->
      <!--            </view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--  </view>-->
      <view class="tab-wrap">
        <view class="tab-wrap-item" @tap="tabChange(1)" :class="{'active': active == 1}">
          <view class="tab-wrap-item-t1">品牌孵化</view>
          <view class="tab-wrap-item-t2">你可能喜欢</view>
        </view>
        <view class="tab-wrap-item" @tap="tabChange(2)" :class="{'active': active == 2}">
          <view class="tab-wrap-item-t1">市场</view>
          <view class="tab-wrap-item-t2">自由交易</view>
        </view>
        <view class="tab-wrap-item" @tap="tabChange(3)" :class="{'active': active == 3}">
          <view class="tab-wrap-item-t1">品牌列表</view>
          <view class="tab-wrap-item-t2">品牌共建</view>
        </view>
      </view>
      <view class="tab-content">
        <view v-show="active == 1" class="tab-content-1">
          <view class="tab-content-1-t">
            <image src="@/static/img/home-icon-6.png"></image>
            <text>你可能喜欢</text>
          </view>
          <pro-four />
        </view>
        <view v-show="active == 2" class="tab-content-2">
          <pro-two />
        </view>
        <view v-show="active == 3" class="tab-content-3">
          <pro-third />
        </view>
      </view>
      <!-- 广告模块 -->
      <!--      <s-popup-image />-->
    </s-layout>
  </view>
</template>

<script setup>
  import openVip from '@/pages/components/open-vip.vue';
  import proFour from '@/pages/components/pro-four.vue';
  import proTwo from '@/pages/components/pro-two.vue';
  import proThird from '@/pages/components/pro-third.vue';
  import { computed, ref } from 'vue';
  import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  // 隐藏原生tabBar
  uni.hideTabBar();
  onLoad(() => {
    getCarList();
  });
  const template = computed(() => sheep.$store('app').template?.home);
  // tab切换
  const active = ref(1);

  function tabChange(val) {
    active.value = val;
  }

  // 获取车辆列表
  let carList = ref([]);
  const getCarList = async () => {
    const { code, data } = await sheep.$api.goods.indexHome({ category_id: 153, is_category_deep: 1 });
    if (code === 1) {
      carList.value = data || [];
    }
  };
  // 下拉刷新
  onPullDownRefresh(() => {
    // sheep.$store('app').init();
    getCarList();
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 800);
  });

</script>

<style lang="scss" scoped>
  .search-wrapper {
    margin: 30rpx;
    background-color: #1E1E1E;
    border-radius: 50rpx;
    padding: 0 30rpx;
    @include flex(center, none);

    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 30rpx;
    }
  }

  .swiper-wrapper {
    margin: 30rpx;
  }

  .text-wrapper {
    @include flex();
    padding: 0 30rpx 30rpx;

    .text-item {
      .title {

        font-weight: 400;
        font-size: 30rpx;
        color: #FFFFFF;
      }

      .sub-title {

        font-weight: 400;
        font-size: 22rpx;
        color: #7B7B7B;
      }
    }

    .right {
      width: 290rpx;
      height: 72rpx;
      background: #1E1E1E;
      border-radius: 12rpx;
      @include flex(center, center);

      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;

      image {
        width: 31rpx;
        height: 34rpx;
        margin-right: 17rpx;
      }
    }
  }

  .product-wrap {
    width: 100%;
    overflow: hidden;

    .product-wrap-overflow {
      @include flex(center, none);
      overflow-x: scroll;

      .product-wrap-item {
        width: 210rpx;
        max-width: 210rpx;
        margin-left: 30rpx;

        image {
          width: inherit;
          height: 131rpx
        }

        .product-wrap-text {
          @include flex(baseline, none);

          .product-wrap-text-1 {

            font-weight: 400;
            font-size: 30rpx;
            color: #13C093;
          }

          .product-wrap-text-2 {

            font-weight: 400;
            font-size: 20rpx;
            color: #7B7B7B;
            text-decoration-line: line-through;
            margin-left: 15rpx;
          }
        }
      }
    }
  }

  .nine-wrap {
    margin: 0 30rpx;
    @include flex();

    .nine-wrap-item {
      width: calc((750rpx - 80rpx) / 2);
      background: #1E1E1E;
      border-radius: 20rpx;

      .nine-wrap-item-m {
        padding: 30rpx;

        .nine-wrap-item-t1 {

          font-weight: 400;
          font-size: 30rpx;
          color: #FFFFFF;
        }

        .nine-wrap-item-t2 {
          margin-top: 16rpx;

          font-weight: 400;
          font-size: 22rpx;
          color: #767676;
        }

        .nine-wrap-item-t3 {
          height: 165rpx;
          margin-top: 26rpx;
          @include flex(left);

          font-weight: 400;
          font-size: 30rpx;
          color: #13C093;
          background-image: url("@/static/img/home-icon-4.png");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: right bottom;
        }

        .nine-wrap-item-right {
          background-image: url("@/static/img/home-icon-5.png");

        }

        image {
          width: 156rpx;
          height: 168rpx;
        }
      }
    }
  }

  .tab-wrap {
    margin: 30rpx;
    padding: 30rpx 0;
    background: #1E1E1E;
    border-radius: 20rpx;
    @include flex();

    .active {
      .tab-wrap-item-t1, .tab-wrap-item-t2 {
        color: #FFFFFF !important;
      }
    }

    .tab-wrap-item {
      width: 33.33%;
      text-align: center;

      .tab-wrap-item-t1 {

        font-weight: 400;
        font-size: 32rpx;
        color: #767676;
      }

      .tab-wrap-item-t2 {
        margin-top: 13rpx;

        font-weight: 400;
        font-size: 20rpx;
        color: #767676;
      }
    }
  }

  .tab-content {
    .tab-content-1 {
      .tab-content-1-t {
        padding: 0 30rpx;
        @include flex(center, none);
        margin-bottom: 30rpx;

        font-weight: 400;
        font-size: 26rpx;
        color: #EBEBEB;

        image {
          width: 26rpx;
          height: 21rpx;
          margin-right: 8rpx;
        }
      }
    }

    .tab-content-2 {
      .tab-content-2-l {
        @include flex();
        flex-wrap: wrap;
      }
    }
  }

  // .text-wrapper {
  // 	.text-item {
  // 		.title {
  // 			font-size: 30rpx;
  // 			color: #FFFFFF;
  // 			border-radius: 10px;
  // 			border: 1px;


  // 			width: 35%;

  // 		}

  // 		.sub-title {
  // 			font-size: 22rpx;
  // 			color: #7B7B7B;
  // 			width: 35%;
  // 		}
  // 	}
  // }

  // .text-wrapper {
  // 	padding: 56rpx 30rpx 30rpx;

  // 	.text {
  // 		color: red;
  // 		background-color: #fff;
  // 	}

  // 	.text1 {
  // 		color: white;
  // 		font-size: 15px;
  // 	}

  // 	.right {
  // 		width: 30%;
  // 		height: 25px;
  // 		text-align: right;
  // 		border-radius: 12rpx;
  // 		background-color: #fff;

  // 	}

  // }
</style>
